<template>
    <div class="equipment-acceptance-form">
        <div class="header-actions">
            <el-button><router-link to="/main/xingzheng/gudingzichan" class="back-link">返回</router-link></el-button>
            <el-button type="primary" @click="goToList">列表</el-button>
        </div>
        <h2 class="form-title">深圳市艾美思普科技有限公司</h2>
        <h2> 设备验收记录表</h2>
        <p class="form-field">
            验收日期：
            <el-date-picker v-model="formData.acceptanceDate" type="date" :disabled="isView"
                placeholder="请选择验收日期"></el-date-picker>
            <span class="required">*</span>
        </p>
        <table class="form-table" border="1">
            <tr>
                <td>设备名称</td>
                <td style="white-space: nowrap">
                    <input v-model="formData.equipmentName" :disabled="isView" placeholder="请输入设备名称">
                    <span class="required">*</span>
                </td>
                <td>规格／型号</td>
                <td><input v-model="formData.specificationModel" :disabled="isView"></td>
            </tr>
            <tr>
                <td>设备编号</td>
                <td style="white-space: nowrap">
                    <input v-model="formData.equipmentNumber" :disabled="isView" placeholder="请输入设备编号">
                    <span class="required">*</span>
                </td>
                <td>校正周期</td>
                <td><input v-model="formData.calibrationCycle" :disabled="isView"></td>
            </tr>
            <tr>
                <td>出产地点</td>
                <td><input v-model="formData.productionPlace" :disabled="isView"></td>
                <td>出产日期</td>
                <td>
                    <el-date-picker v-model="formData.productionDate" type="date" :disabled="isView"></el-date-picker>
                </td>
            </tr>
            <tr>
                <td>电压</td>
                <td><input v-model="formData.voltage" :disabled="isView"></td>
                <td>功率</td>
                <td><input v-model="formData.power" :disabled="isView"></td>
            </tr>
        </table>
        <h3 class="section-title">主要附件
            <button @click="addAccessory" v-if="!isView" class="add-button">新增附件</button>
        </h3>
        <table class="form-table" border="1">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>型号</th>
                <th>数量</th>
                <th v-if="!isView">操作</th>
            </tr>
            <tr v-for="(item, index) in formData.accessoriesList" :key="index">
                <td>{{ index + 1 }}</td>
                <td><input v-model="item.name" :disabled="isView"></td>
                <td><input v-model="item.model" :disabled="isView"></td>
                <td><input v-model="item.quantity" type="number" :disabled="isView"></td>
                <td v-if="!isView">
                    <el-button type="danger" size="mini" @click="removeAccessory(index)">删除</el-button>
                </td>
            </tr>
        </table>
        <table class="form-table" border="1">
            <tr>
                <td style="width: 150px;">外观综合判定</td>
                <td>
                    <textarea v-model="formData.appearanceJudgment" style="width: 100%; height: 80px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
            <tr>
                <td>设备附件带配清查结果</td>
                <td>
                    <textarea v-model="formData.attachmentInventoryResult" style="width: 100%; height: 80px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
            <tr>
                <td>设备功能测试结果</td>
                <td>
                    <textarea v-model="formData.functionTestResult" style="width: 100%; height: 80px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
            <tr>
                <td>设备性能及精确判定</td>
                <td>
                    <textarea v-model="formData.performanceAccuracyJudgment" style="width: 100%; height: 80px;"
                        :disabled="isView"></textarea>
                </td>
            </tr>
        </table>
        <table class="form-table" border="1">
            <tr>
                <td>验收最终判定</td>
                <td colspan="5">
                    <label>
                        <input type="radio" v-model="formData.finalJudgment" value="不合格、退供应商" :disabled="isView">
                        A．不合格、退供应商
                    </label>
                    <label>
                        <input type="radio" v-model="formData.finalJudgment" value="OK、可投入使用" :disabled="isView">
                        B．OK、可投入使用
                    </label>
                </td>
            </tr>
            <tr>
                <td>部长</td>
                <td><input v-model="formData.minister" :disabled="isView"></td>
                <td>部门经理</td>
                <td><input v-model="formData.departmentManager" :disabled="isView"></td>
                <td>验收人</td>
                <td><input v-model="formData.acceptancePerson" :disabled="isView"></td>
            </tr>
            <tr>
                <td>日期</td>
                <td>
                    <el-date-picker v-model="formData.ministerDate" type="date" :disabled="isView"></el-date-picker>
                </td>
                <td>日期</td>
                <td>
                    <el-date-picker v-model="formData.managerDate" type="date" :disabled="isView"></el-date-picker>
                </td>
                <td>日期</td>
                <td>
                    <el-date-picker v-model="formData.acceptanceDatePerson" type="date"
                        :disabled="isView"></el-date-picker>
                </td>
            </tr>
        </table>
        <p class="form-info">表单编号及版本：AM-JY-116 A/1 生效日期：2015年11月1日 保存年限：长期</p>
        <button @click="saveData" v-if="!isView" class="save-button">保存</button>
    </div>
</template>

<script>
import { saveEquipmentAcceptance, getEquipmentAcceptanceDetail } from '@/api/equipmentAcceptance'
import { formatDate, formatDateTime } from '@/utils/date'
export default {
    data() {
        return {
            isView: false,
            formData: {
                id: null,
                acceptanceDate: '',
                equipmentName: '',
                specificationModel: '',
                equipmentNumber: '',
                calibrationCycle: '',
                productionPlace: '',
                productionDate: '',
                voltage: '',
                power: '',
                appearanceJudgment: '',
                attachmentInventoryResult: '',
                functionTestResult: '',
                performanceAccuracyJudgment: '',
                finalJudgment: '',
                minister: '',
                ministerDate: '',
                departmentManager: '',
                managerDate: '',
                acceptancePerson: '',
                acceptanceDatePerson: '',
                accessoriesList: []
            }
        };
    },
    created() {
        const id = this.$route.query.id
        const type = this.$route.query.type
        this.isView = type === 'view'
        if (id) {
            this.getDetail(id)
        } else {
            this.formData.accessoriesList = Array.from({ length: 4 }, () => ({ name: '', model: '', quantity: 0 }))
        }
    },
    methods: {
        async getDetail(id) {
            try {
                const response = await getEquipmentAcceptanceDetail(id)
                if (response.data) {
                    // 格式化日期字段
                    const formattedData = {
                        ...response.data,
                        acceptanceDate: formatDate(response.data.acceptanceDate),
                        productionDate: formatDate(response.data.productionDate),
                        ministerDate: formatDate(response.data.ministerDate),
                        managerDate: formatDate(response.data.managerDate),
                        acceptanceDatePerson: formatDate(response.data.acceptanceDatePerson)
                    };
                    this.formData = {
                        ...this.formData,
                        ...formattedData
                    };
                }
            } catch (error) {
                this.$message.error('获取详情失败')
            }
        },
        async saveData() {
            if (!this.validateForm()) {
                return
            }
            try {
                // 格式化日期字段以便保存
                const formDataToSave = {
                    ...this.formData,
                    acceptanceDate: formatDate(this.formData.acceptanceDate),
                    productionDate: formatDate(this.formData.productionDate),
                    ministerDate: formatDate(this.formData.ministerDate),
                    managerDate: formatDate(this.formData.managerDate),
                    acceptanceDatePerson: formatDate(this.formData.acceptanceDatePerson)
                };
                const success = await saveEquipmentAcceptance(formDataToSave)
                if (success) {
                    this.$message.success(this.formData.id ? '更新成功' : '保存成功')
                    this.goToList()
                } else {
                    this.$message.error(this.formData.id ? '更新失败' : '保存失败')
                }
            } catch (error) {
                this.$message.error('操作失败')
                console.error('保存失败', error)
            }
        },
        validateForm() {
            if (!this.formData.acceptanceDate) {
                this.$message.error('请选择验收日期')
                return false
            }
            if (!this.formData.equipmentName) {
                this.$message.error('请输入设备名称')
                return false
            }
            if (!this.formData.equipmentNumber) {
                this.$message.error('请输入设备编号')
                return false
            }
            return true
        },
        addAccessory() {
            this.formData.accessoriesList.push({ name: '', model: '', quantity: 0 })
        },
        removeAccessory(index) {
            this.formData.accessoriesList.splice(index, 1)
        },
        goToList() {
            this.$router.push('/main/xingzheng/sbyanshou/sbyanshouList')
        }
    }
};
</script>

<style scoped>
.equipment-acceptance-form {
    font-family: '宋体', sans-serif;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    width: 279mm;
    margin: 0 auto;
}
input[type="radio"]{
    height: 13px;
}
.header-actions {
    display: flex;
}

.back-link {
    position: static;
    text-decoration: none;
    color: #333;
}

.form-title {
    text-align: center;
    color: #333;
}

.form-field {
    margin-bottom: 20px;
    text-align: left;
}

.form-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

th,
td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

.add-button {
    margin-left: 10px;
}

.required {
    color: #F56C6C;
    margin-left: 4px;
}

input,
textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input[disabled],
textarea[disabled] {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
}

.form-info {
    color: #666;
    margin-bottom: 20px;
}

.save-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-button:hover {
    background-color: #3a8ee6;
}
</style>